<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goToIdentify = () => {
  if (localStorage.getItem('user')) {
    router.push('/identify')
  } else {
    router.push('/login')
  }
}
</script>

<template>
  <div class="home-container">
    <a-row>
      <a-col :span="24">
        <div class="banner">
          <h1>垃圾识别系统</h1>
          <p>帮助您准确分类垃圾，保护环境从我做起</p>
          <a-button type="primary" size="large" @click="goToIdentify">
            开始识别
          </a-button>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 40px">
      <a-col :span="6">
        <a-card title="可回收垃圾" class="feature-card recyclable">
          <template #cover>
            <div class="img-container">
              <div class="img-circle">
                <img alt="可回收垃圾" src="../assets/icon/可回收垃圾.png" />
              </div>
            </div>
          </template>
          <p>包括衣物、玻璃、金属、纸张、塑料和鞋袜等可以循环利用的生活废弃物</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="有害垃圾" class="feature-card harmful">
          <template #cover>
            <div class="img-container">
              <div class="img-circle">
                <img alt="有害垃圾" src="../assets/icon/有害垃圾.png" />
              </div>
            </div>
          </template>
          <p>包括废电子产品、医药类等对人体健康或自然环境造成直接或潜在危害的生活废弃物</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="厨余垃圾" class="feature-card kitchen">
          <template #cover>
            <div class="img-container">
              <div class="img-circle">
                <img alt="厨余垃圾" src="../assets/icon/厨余垃圾.png" />
              </div>
            </div>
          </template>
          <p>包括植物类、作物类、食物类等易腐烂的生活废弃物</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="其他垃圾" class="feature-card other">
          <template #cover>
            <div class="img-container">
              <div class="img-circle">
                <img alt="其他垃圾" src="../assets/icon/其他垃圾.png" />
              </div>
            </div>
          </template>
          <p>指除可回收物、有害垃圾、厨余垃圾以外的其他生活废弃物</p>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
}
.banner {
  text-align: center;
  padding: 60px 0;
}
.banner h1 {
  font-size: 36px;
  margin-bottom: 20px;
}
.banner p {
  font-size: 18px;
  color: #666;
  margin-bottom: 30px;
}
.feature-card {
  margin-bottom: 20px;
  height: 100%;
  transition: all 0.3s ease;
  overflow: hidden;
  border-radius: 12px;
  border: none;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-card.recyclable :deep(.ant-card-head) {
  background-color: rgba(24, 144, 255, 0.1);
  border-bottom: 3px solid #1890ff;
}

.feature-card.harmful :deep(.ant-card-head) {
  background-color: rgba(255, 77, 79, 0.1);
  border-bottom: 3px solid #ff4d4f;
}

.feature-card.kitchen :deep(.ant-card-head) {
  background-color: rgba(82, 196, 26, 0.1);
  border-bottom: 3px solid #52c41a;
}

.feature-card.other :deep(.ant-card-head) {
  background-color: rgba(144, 144, 144, 0.1);
  border-bottom: 3px solid #909090;
}

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.img-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all 0.4s ease;
  position: relative;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.recyclable .img-container {
  background: linear-gradient(to bottom, rgba(24, 144, 255, 0.05), rgba(24, 144, 255, 0.2));
}

.recyclable .img-circle {
  border: 3px solid rgba(24, 144, 255, 0.7);
}

.harmful .img-container {
  background: linear-gradient(to bottom, rgba(255, 77, 79, 0.05), rgba(255, 77, 79, 0.2));
}

.harmful .img-circle {
  border: 3px solid rgba(255, 77, 79, 0.7);
}

.kitchen .img-container {
  background: linear-gradient(to bottom, rgba(82, 196, 26, 0.05), rgba(82, 196, 26, 0.2));
}

.kitchen .img-circle {
  border: 3px solid rgba(82, 196, 26, 0.7);
}

.other .img-container {
  background: linear-gradient(to bottom, rgba(144, 144, 144, 0.05), rgba(144, 144, 144, 0.2));
}

.other .img-circle {
  border: 3px solid rgba(144, 144, 144, 0.7);
}

.feature-card:hover .img-circle {
  transform: scale(1.08);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.feature-card :deep(img) {
  max-width: 70%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  transition: transform 0.4s ease;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

.feature-card:hover :deep(img) {
  transform: scale(1.1) rotate(5deg);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.feature-card:hover .img-circle {
  animation: pulse 1.5s infinite;
}
</style>
